<template>
  <div class="one-page">

    <div class="page-header">
      <span class="page-header-date">
        <span style="margin-right: 16px;">{{dateTime}}</span>
        {{week}}
      </span>
      <span class="page-header-title">立码停车平台数据系统</span>
      <span class="close-screen" @click="toPage">
        <img style="height: 2.2rem;" src="../../../assets/newBigDataSourceImage/back.png">
        <span>返回</span>
      </span>
    </div>

    <div class="content">
      <div class="top-box">
        <div>
          <img src="../../../assets/newBigDataSourceImage/park.png">
          <span class="content-top-title">预约开启</span>
        </div>
        <div>
          <img src="../../../assets/newBigDataSourceImage/coupons.png">
          <span class="content-top-title">开启停车券</span>
        </div>
        <div>
          <img src="../../../assets/newBigDataSourceImage/system.png">
          <span class="content-top-title">开启单系统</span>
        </div>
        <div>
          <img src="../../../assets/newBigDataSourceImage/systemTwo.png">
          <span class="content-top-title">开启双系统</span>
        </div>
      </div>

      <div class="content-two">
        <div class="two-left-box">
          <parking :id="parkId"/>
        </div>
        <div class="two-right-box">
          <duration />
        </div>
      </div>

      <div class="content-bottom">
        <div class="bottom-left-box">
          <merchant :id="parkId" />
        </div>
        <div class="bottom-right-box">
          <inOutInfo :id="parkId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import overView from './components/overView.vue'
  // import dataSummary from './components/dataSummary.vue'
  // import typeProportion from './components/typeProportion.vue'
  // import inTimeProportion from './components/inTimeProportion.vue'
  // import marktProportion from './components/marktProportion.vue'
  // import areaMap from './components/areaMap.vue'


  import inOutInfo from './components/inOutInfo.vue'
  import merchant from './components/merchant.vue'
  import parking from './components/parking.vue'
  import duration from './components/duration.vue'
  // import saturation from './components/saturation.vue'
  // import carInOut from './components/carInOut.vue'
  // import parkType from './components/parkType.vue'
  // import dateView from './components/dateView.vue'

  export default {
    name: 'big-data-screen',
    components: {
      // overView,
      // dataSummary,
      // carInOut,
      // typeProportion,
      // inTimeProportion,
      // marktProportion,
      // areaMap,


      inOutInfo,
      merchant,
      parking,
      duration
      // saturation,
      // parkType,
      // dateView

    },
    props: ['id'],
    data() {
      return {
        week: null,
        dateTime: null,
        seacrhData: '搜索停车场内用户',
        parkId: this.id
      }
    },
    mounted() {
      this.getDateTime();
    },
    methods: {
      toPage() {
        this.$emit('swithPage',true)
      },

      closeScreen() {
        this.$router.push({path:'/'});
      },

      searchFous() {
        this.seacrhData = null;
      },

      searchBlur() {
        if(!this.seacrhData) {
          this.seacrhData = "搜索停车场内用户"
        }
      },

      getDateTime() {
        let myDate = new Date();
        let month = String(myDate.getMonth() + 1).padStart(2,0);
        let day = String(myDate.getDate()).padStart(2,0);
        let week = myDate.getDay();
        switch (week) {
          case 0:
            this.week = '星期日';
            break;
          case 1:
            this.week = '星期一';
            break;
          case 2:
            this.week = '星期二';
            break;
          case 3:
            this.week = '星期三';
            break;
          case 4:
            this.week = '星期四';
            break;
          case 5:
            this.week = '星期五';
            break;
          case 6:
            this.week = '星期六'
        }
        this.dateTime = year + '-' + month + '-' + day;
      }
    }
  }
</script>

<style scoped>
  html {
    font-size: 10px;
  }
  p {
    margin: 0;
  }
  .one-page {
    height: 100%;
    padding: 0;
  }

  .page-header {
    height: 8.06%;
    width: 100%;
    background-image: url('../../../assets/newBigDataSourceImage/header.png');
    background-size: 100%,100%;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 75px 0 40px;
    position: relative;
  }

  .page-header-date {
    font-size: 1.8rem;
    color: rgba(22, 118, 233, 1);
  }

  .page-header-title {
    color: #01FBFE;
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 2px;
    -webkit-mask-image:-webkit-gradient(linear,0 0,0 bottom,from(#157DEA),to(rgba(21,125,234,0.5)));
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .content {
    width: 86.09%;
    max-width: 1823px;
    height: 86.4%;
    max-height: 1012px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .close-screen {
    position: absolute;
    right: 7.5rem;
    width: 7.6rem;
    height: 3.4rem;
    border: 1px solid #1676E9;
    border-radius: 6px 6px 6px 6px;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .close-screen span {
    color: #1676E9;
    font-size: 1.5rem;
  }

  .close-screen:hover {
    cursor: pointer;
  }

  .top-box {
    height: 8.2rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .top-box div {
    height: 100%;
    width: 39.9rem;
    background-color: #002057;
    display: flex;
    align-items: center;
  }

  .top-box div img {
    height: 7.4rem;
    margin-left: 2.4rem;
  }

  .content-two {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
  }

  .content-bottom {
    width: 100%;
    height: 38%;
    display: flex;
    justify-content: space-between;
  }

  .two-left-box {
    height: 100%;
    width: 61.83%;
    background-color: #002057;
  }

  .two-right-box {
    height: 100%;
    width: 36.97%;
    background-color: #002057;
  }

  .bottom-left-box {
    height: 100%;
    width: 49.25%;
    background-color: #002057;
  }

  .bottom-right-box {
    height: 100%;
    width: 49.49%;
    background-color: #002057;
  }

  .content-top-title {
    color: #fff;
    font-size: 2.4rem;
    margin-left: 2.4rem;
  }









</style>
